<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>home</title>
	<link rel="stylesheet" type="text/css" href="${ctx}/themes/gray/easyui.css">
	<script type="text/javascript" src="${ctx}/script/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/script/jquery.easyui.min.js"></script>
	<style type="text/css">  
.easyui-accordion div div.hover{border:1px dashed #99BBE8; background:#E0ECFF;cursor:pointer;}
.easyui-accordion div div.hover a{color:#416AA3;}
.easyui-accordion div div.selected{border:1px solid #99BBE8; background:#E0ECFF;cursor:default;}
.easyui-accordion div div.selected a{color:#416AA3; font-weight:bold;}
	</style>

	<script>
		$(function(){
			tabClose();
			tabCloseEven();
			InitLeftMenu();
		});
		
		
		function InitLeftMenu() {
			$('.easyui-accordion div p a').click(function(){
				$('.easyui-accordion div').removeClass("selected");
				$(this).parent().addClass("selected");
			}).hover(function(){
				$(this).parent().addClass("hover");
			},function(){
				$(this).parent().removeClass("hover");
			});
		
			//选中第一个
			var panels = $('#nav').accordion('panels');
			var t = panels[0].panel('options').title;
		    $('#nav').accordion('select', t);
		}

		function addTab(title, url){
 			if ($('#tabs').tabs('exists', title)){
		 		$('#tabs').tabs('select', title);//选中并刷新
		 		var currTab = $('#tabs').tabs('getSelected');
				var url = $(currTab.panel('options').content).attr('src');
		 		if(url != undefined && currTab.panel('options').title != 'Home') {
					$('#tabs').tabs('update',{
						tab:currTab,
						options:{
							content:createFrame(url)
						}
					})
				}
			} else {
				var content = createFrame(url);
				$('#tabs').tabs('add',{
		 			title:title,
					content:content,
					closable:true
				});
			}
			tabClose();
		}
		function createFrame(url)
		{
			var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
			return s;
		}
				
		function tabClose()
		{
			/*双击关闭TAB选项卡*/
			$(".tabs-inner").dblclick(function(){
				var subtitle = $(this).children(".tabs-closable").text();
				$('#tabs').tabs('close',subtitle);
			})
			/*为选项卡绑定右键*/
			$(".tabs-inner").bind('contextmenu',function(e){
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
		
				var subtitle =$(this).children(".tabs-closable").text();
		
				$('#mm').data("currtab",subtitle);
				$('#tabs').tabs('select',subtitle);
				return false;
			});
		}		
		//绑定右键菜单事件
		function tabCloseEven()
		{
			//刷新
			$('#mm-tabupdate').click(function(){
				var currTab = $('#tabs').tabs('getSelected');
				var url = $(currTab.panel('options').content).attr('src');
				//alert(currTab.panel('options').title);
				if(url != undefined && currTab.panel('options').title != 'Home') {
					$('#tabs').tabs('update',{
						tab:currTab,
						options:{
							content:createFrame(url)
						}
					})
				}
			})
			//关闭当前
			$('#mm-tabclose').click(function(){
				var currtab_title = $('#mm').data("currtab");
				$('#tabs').tabs('close',currtab_title);
			})
			//全部关闭
			$('#mm-tabcloseall').click(function(){
				$('.tabs-inner span').each(function(i,n){
					var t = $(n).text();
					if(t != 'Home') {
						$('#tabs').tabs('close',t);
					}
				});
			});
			//关闭除当前之外的TAB
			$('#mm-tabcloseother').click(function(){
				var prevall = $('.tabs-selected').prevAll();
				var nextall = $('.tabs-selected').nextAll();		
				if(prevall.length>0){
					prevall.each(function(i,n){
						var t=$('a:eq(0) span',$(n)).text();
						if(t != 'Home') {
							$('#tabs').tabs('close',t);
						}
					});
				}
				if(nextall.length>0) {
					nextall.each(function(i,n){
						var t=$('a:eq(0) span',$(n)).text();
						if(t != 'Home') {
							$('#tabs').tabs('close',t);
						}
					});
				}
				return false;
			});
			//关闭当前右侧的TAB
			$('#mm-tabcloseright').click(function(){
				var nextall = $('.tabs-selected').nextAll();
				if(nextall.length==0){
					//msgShow('系统提示','后边没有啦~~','error');
					alert('后边没有啦~~');
					return false;
				}
				nextall.each(function(i,n){
					var t=$('a:eq(0) span',$(n)).text();
					$('#tabs').tabs('close',t);
				});
				return false;
			});
			//关闭当前左侧的TAB
			$('#mm-tabcloseleft').click(function(){
				var prevall = $('.tabs-selected').prevAll();
				if(prevall.length==0){
					alert('到头了，前边没有啦~~');
					return false;
				}
				prevall.each(function(i,n){
					var t=$('a:eq(0) span',$(n)).text();
					$('#tabs').tabs('close',t);
				});
				return false;
			});
		
			//退出
			$("#mm-exit").click(function(){
				$('#mm').menu('hide');
			})
		}	
	</script>
</head>
<body class="easyui-layout">
	<div region="north" border="true" style="height:60px;background:#B3DFDA;">
	<div id="top">
	<div id="logo"><img src="${ctx}/themes/gray/images/logo.png" /></div>
	<div id="header">
        <ul class="header_ul">
        	<li><font color="white">当前用户：${myVisit.czy.mc}（<a href="${ctx}/logout.action">退出</a>）</font></li>
        </ul>
    </div>
	</div>
	</div>
	<div region="west" border="true" split="true" title="<font size='2'>系统功能菜单</font>" style="width:200px;padding:0px;border-left:1px solid #99BBE8;">
	<div id="xtgn" class="easyui-accordion" fit="true" border="false">
		<c:forEach var="xtgn" items="${xtgnList}">
	  		<c:choose>
	  			<c:when test="${xtgn == null}">
	  				<p>no power!</p>
	  			</c:when>
	  			<c:otherwise>
	  				<div title="${xtgn.title}" style="overflow:auto;">
	  					<c:forEach var="content" items="${xtgn.content}">
	  						<p><img src='${ctx}/images/menu_arrow.gif' border='0'/>&nbsp;<a href="#" onclick="addTab('${content.jdmc}','${ctx}/${content.gndz}')">${content.jdmc}</a></p>
	  					</c:forEach>
	  				</div>
	  			</c:otherwise>
	  					
	  		</c:choose>
	  	</c:forEach>
	  	<div title="test" selected="true">
		    <img src='${ctx}/images/menu_arrow.gif' border='0'/>&nbsp;<a href="#" onclick="addTab('baidu','http://www.baidu.com')">baidu</a><p/>
		    <img src='${ctx}/images/menu_arrow.gif' border='0'/>&nbsp;<a href="#" onclick="addTab('jquery','http://jquery.com/')">jquery</a><p/>
		</div>
	</div>
	</div>
	
	<div id="mainPanle" region="center" border="true" border="false">
		 <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
		 		<div title="Home" style="text-align:center;vertical-align:middle;float:top;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
					<img width="100%" heigth="100%" src="${ctx}/themes/gray/images/welcome.jpg"/>
                </div>
         </div>
	</div>
	<!-- <div region="center" title="MainWorkArea Bar">
	<div region="center" title="MainWorkArea Bar">
		<iframe id="MainWorkArea" name="MainWorkArea" marginWidth="0" marginHeight="0" frameBorder="0" width="100%" height="100%" src="" scrolling="auto"></iframe>
	</div> -->
	<!--
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	-->
	<div region="south" border="false" style="height:25px;background:url('${ctx}/themes/gray/images/panel_title.gif') repeat-x;padding:0px;text-align:center;">&copy;tianshaojie@msn.com</div>
	
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseother">关闭其他</div>
		<div id="mm-tabcloseall">关闭全部</div>
	</div>
</body>
<script type="text/javascript">
  //alert("${ctx}");
</script>
</html>